<template>
  <!-- 作战情报 -->
  <div class="town-info">
      <date-time ref="dataTimeRef" @date="handleChange" />
      <!-- 预警 -->
      <div class="warning-card" style="background: #fffefe;">
        <div class="card-title bg1">
          <img class="title-img" src="~@/assets/imgs/publicline/board/flag_zj.png" alt="">
          <span class="title">移网预警</span>
        </div>
        <div class="card-body">
          <!-- <van-loading v-if="isLoading" type="spinner" color="#1989fa" /> -->
          <div class="kpi-list">
            <div class="kpi-item" @click="openDetail(warnInfoCom.SW_VALUE, '/publicline/town-info/swdetail')">
              <div class="kpi-name">三无用户</div>
              <div class="kpi-value" :class="{ 'kpi-line': warnInfoCom.SW_VALUE != 0}">
                {{ warnInfoCom.SW_VALUE || 0 }}
              </div>
            </div>
            <div class="kpi-item" @click="openDetail(warnInfoCom.WCZ_VALUE, '/publicline/town-info/ywcmDetail')">
              <div class="kpi-name">沉默用户</div>
              <div class="kpi-value" :class="{ 'kpi-line': warnInfoCom.WCZ_VALUE != 0}">
                {{ warnInfoCom.WCZ_VALUE || 0 }}
              </div>
            </div>
            <div class="kpi-item" @click="openDetail(warnInfoCom.WDW_VALUE, '/publicline/town-info/5gdetail')">
              <div class="kpi-name">5G未登网用户</div>
              <div class="kpi-value" :class="{ 'kpi-line': warnInfoCom.WDW_VALUE != 0}">
                {{ warnInfoCom.WDW_VALUE || 0 }}
              </div>
            </div>
            <div class="kpi-item" @click="openDetail(warnInfoCom.XCYJ_VALUE, '/publicline/town-info/xcyjdetail')">
              <div class="kpi-name">携出预警</div>
              <div class="kpi-value" :class="{ 'kpi-line': warnInfoCom.XCYJ_VALUE != 0}">
                {{ warnInfoCom.XCYJ_VALUE || 0 }}
              </div>
            </div>
            <div class="kpi-item" @click="openDetail(warnInfoCom.XCYH_VALUE, '/publicline/town-info/xcyhdetail')">
              <div class="kpi-name">携出用户</div>
              <div class="kpi-value" :class="{ 'kpi-line': warnInfoCom.XCYH_VALUE != 0}">
                {{ warnInfoCom.XCYH_VALUE || 0 }}
              </div>
            </div>
            <div class="kpi-item" @click="openDetail(warnInfoCom.LW_VALUE, '/publicline/town-info/ywlwdetail')">
              <div class="kpi-name">离网用户</div>
              <div class="kpi-value" :class="{ 'kpi-line': warnInfo.LW_VALUE != 0}">
                {{ warnInfoCom.LW_VALUE || 0 }}
              </div>
            </div>
            <div class="kpi-item" @click="openDetail(warnInfoCom.JT_VALUE, '/publicline/town-info/jtdetail')">
              <div class="kpi-name">降套用户</div>
              <div class="kpi-value" :class="{ 'kpi-line': warnInfoCom.JT_VALUE != 0}">
                {{ warnInfoCom.JT_VALUE || 0 }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="warning-card" style="background: #fcfdff;">
        <div class="card-title bg2">
          <img class="title-img" src="~@/assets/imgs/publicline/board/flag_fz.png" alt="">
          <span class="title">宽带预警</span>
        </div>
        <div class="card-body">
          <!-- <van-loading v-if="isLoadingKd" type="spinner" color="#1989fa" /> -->
          <div class="kpi-list kd">
            <div class="kpi-item" @click="openDetail(warnInfoCom.DWY_VALUE, '/publicline/town-info/dwyDetail')">
              <div class="kpi-name">端网业不匹配</div>
              <div class="kpi-value" :class="{ 'kpi-line': warnInfoCom.DWY_VALUE != 0}">
                {{ warnInfoCom.DWY_VALUE || 0 }}
              </div>
            </div>
            <div class="kpi-item" @click="openDetail(warnInfoCom.KD_WCZ_VALUE, '/publicline/town-info/kdcmDetail')">
              <div class="kpi-name">沉默用户</div>
              <div class="kpi-value" :class="{ 'kpi-line': warnInfoCom.KD_WCZ_VALUE != 0}">
                {{ warnInfoCom.KD_WCZ_VALUE || 0 }}
              </div>
            </div>
            <div class="kpi-item" @click="openDetail(warnInfoCom.KDDQ_VALUE, '/publicline/town-info/kddqdetail')">
              <div class="kpi-name">宽带到期预警</div>
              <div class="kpi-value" :class="{ 'kpi-line': warnInfoCom.KDDQ_VALUE != 0}">
                {{ warnInfoCom.KDDQ_VALUE || 0 }}
              </div>
            </div>
            <div class="kpi-item" @click="openDetail(warnInfoCom.LS_VALUE, '/publicline/town-info/lsdetail')">
              <div class="kpi-name">流失用户</div>
              <div class="kpi-value" :class="{ 'kpi-line': warnInfoCom.LS_VALUE != 0}">
                {{ warnInfoCom.LS_VALUE || 0 }}
              </div>
            </div>
            <div class="kpi-item" @click="openLyDetail">
              <div class="kpi-name">楼宇端口预警</div>
              <div class="kpi-value" :class="{ 'kpi-line': warnInfo.LYZYL_VALUE != 0}">
                {{ warnInfo.LYZYL_VALUE || 0 }}
              </div>
            </div>
          </div>
        </div>
      </div>
 
      <!-- 网格发展排名 -->
      <!-- <rank-card-grid :dayId="dayId" v-if="$isCeo"></rank-card-grid> -->
      <rank-card-grid :dayId="dayId"></rank-card-grid>
      <!-- 人员发展排名 -->
      <!-- <rank-card-user :dayId="dayId"></rank-card-user> -->
  </div>
</template>

<script>
import dateTime from '@/components/common/dateTime.vue'
import rankCardUser from '@/views/components/publicline/board/rankCardUser.vue'
import rankCardGrid from '@/views/components/publicline/board/rankCardGrid.vue'

import * as dayjs from "dayjs"
import { accountDate } from '@/api/common.js'
import { kpiWarn, kpiWarnCom } from '@/api/publicline/board.js'

export default {
  components: { dateTime, rankCardGrid, rankCardUser },
  data() {
    return {
      isLoading: true,
      isLoadingKd: true,
      isLoadingRank: true,
      dayId: '',
      warnInfoCom: {},
      warnInfo: {},
    };
  },
  mounted() {
    this.getAccountDate()
  },
  methods: {
    // 获取日账期
    async getAccountDate() {
      const res = await accountDate({ PARAMCODE: 'D' })
      const { result, success } = res
      if (success) {
        this.dayId = dayjs(result[0].value).format('YYYY-MM-DD')
        this.$refs.dataTimeRef.initDateTime(this.dayId)
        this.loadingData()
      }
    },
    // 获取改变的账期
    handleChange(val) {
      this.dayId = val
      this.loadingData()
    },
    async loadingData() {
      await this.getKpiWarnCom()
      await this.getKpiWarn()
    },
    // 获取指标
    async getKpiWarnCom() {
      this.isLoading = true
      // const res = await kpiWarnCom({ levelName: this.$dataPermission, dayId: dayjs(this.dayId).format('YYYYMMDD') })
      const res = await kpiWarnCom({ gridId: this.$gridId, dayId: dayjs(this.dayId).format('YYYYMMDD') })
      const { result, success } = res
      if (success) {
        this.warnInfoCom = result[0] || {}
        this.isLoading = false
      }
    },
     // 获取指标
    async getKpiWarn() {
      this.isLoadingKd = true
      // const res = await kpiWarn({ levelName: this.$dataPermission, dayId: dayjs(this.dayId).format('YYYYMMDD') })
      const res = await kpiWarn({ gridId: this.$gridId, dayId: dayjs(this.dayId).format('YYYYMMDD') })   // 临时使用
      const { result, success } = res
      if (success) {
        this.warnInfo = result[0] || {}
        this.isLoadingKd = false
      }
    },
    openDetail(isZero, url) {
      return; // 临时使用
      if(isZero != 0) {
        this.$open.call(this, url,
          {
            dayId: dayjs(this.dayId).format('YYYYMMDD')
          }
        )
      }
    },
    openLyDetail() {
      this.$open.call(this, '/publicline/town-info/lydetail')
    },
  }
}
</script>

<style lang="less" scoped>
@import "~@/assets/less/rank-card.less";

.warning-card {
  margin-bottom: 10px;
  background: #FFF;

  .card-title {
    height: 50px;
    line-height: 50px;

    &.bg1 {
      background-image: linear-gradient(180deg, rgba(253, 218, 213, 0.22) 1%, #FFFFFF 100%);
    }
    &.bg2 {
      background-image: linear-gradient(180deg, rgba(194, 220, 255, 0.18) 0%, #FFFFFF 100%);
    }

    .title-img {
      width: 32px;
      vertical-align: middle;
      padding-left: 10px;
    }
    .title {
      font-size: 18px;
    }
  }
  .card-body {

    .kpi-list {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      flex-wrap: wrap;
      padding: 0 12px;
      .kpi-item {
        width: 30%;
        padding: 12px 0 8px;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        margin: 0 3px 6px;
        background-image: url('~@/assets/imgs/publicline/board/bg-card-zj-wjgh.png');
        text-align: center;
        border: 1px solid #fd816e3c;
        .kpi-value {
          font-size: 22px;
          margin-top: 6px;
          color: #FD806E;
          &.kpi-line {
            text-decoration: underline;
          }
        }
      }
      
      &.kd {

        .kpi-item {
          border: 1px solid rgb(213, 223, 255);
          background: #fcfdff;

          .kpi-value {
            color: #8ba8ff;
          }
        }
      }
    }
  }
}

</style>